<template>
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
        <el-button type="primary" size="mini" class="add-btn" @click="toAddress">新增地址</el-button>
        <el-table :data="list" style="width: 100%" header-cell-class-name='header-cell' v-loading="loading">
            <el-table-column label="选择" width="66" prop="address_id" align="center">
                <template slot-scope="scope">
                    <el-radio :label="scope.row.address_id" v-model="radioAddressId" @input="getRadioVal($event,scope.row)"></el-radio>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="收货人">
            </el-table-column>
            <el-table-column prop="phone" label="电话">
            </el-table-column>
            <el-table-column prop="area_name" label="所在地区">
            </el-table-column>
            <el-table-column prop="address_detail" label="详细地址" width="300px">
                <template slot-scope="scope">
                    <span>{{ scope.row.address_detail }}</span>
                    <el-tag size="mini" v-if="scope.row.is_default">默认地址</el-tag>
                    <!-- <el-button type="text" class="handle-btn" v-if="!scope.row.is_default" @click='setDefault(scope.$index)'>设为默认</el-button>
                    <el-button class="default-btn" v-else>默认地址</el-button> -->
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
import {
    addrList
} from '../api/user'
export default {
    name: "SmallGoodsItem",
    props: {
        item: Object,
    },
    data() {
        return {
            list: [],
            dialogTableVisible: false,
            radioAddressId: '',
            loading:false,
            // radioAddressObj:{},
        }
    },
    created() {
        // this.getList();
    },
    methods: {
        add(){
            this.dialogTableVisible = true;
        },
        getList() {
            const that = this;
            that.loading = true;
            addrList().then(res => {
                that.loading = false;
                if (res.code == 0) {
                    res.data.forEach(v => {
                        v.is_default = false;
                        v.province_name = v.province_name.split('省')[0];
                        v.regionName = v.regionName.split('市')[0];
                        if (res.default_id == v.address_id) {
                            v.is_default = true;
                        }
                    })
                    that.list = res.data;
                }
            })
        },
        getRadioVal(val,obj) {
            console.log('val', val)
            console.log('obj',obj)
            this.dialogTableVisible = false;
            this.radioGoodsId = val;
            this.$emit('getRadioVal',obj)
            
        },
        toAddress(){
            this.$router.push('/user/address')
        }
    }
};
</script>
<style>
.v-modal {
    opacity: 0.1;
}

.el-dialog {
    width: 960px;
    border-radius: 6px;
    box-shadow: unset;
}
.el-dialog__body{
    padding:20px;
}
.el-message-box {
    width: 420px;
    position: absolute;
    top: 20%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
}

.el-dialog__header,
.el-message-box__header {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.el-dialog__title,
.el-message-box__title {
    font-size: 14px;
    font-weight: bold;
}

.el-dialog__headerbtn {
    right: 15px;
    top: 14px;
}

.el-message-box__headerbtn {
    right: 10px;
    top: 10px;
}
</style>
<style lang='scss' scoped>
::v-deep .el-radio__label {
    display: none;
}
.default-btn {
    background: rgba(255, 68, 1, 0.12);
    border-radius: 8px;
    border: 0;
    color: #ff4401;
}
.add-btn{
    margin-bottom: 20px;
}
</style>